<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>ruinb0w HomePage</title>
    <link rel="stylesheet" href="../style/style.css">
    <link rel="stylesheet" href="../style/collect.css">
</head>

<body>
    <header>
        <h1>ruinb<span>0</span>w</h1>
        <nav>
            <ul>
                <li id="home"><a href="../index.html">Home</a></li>
                <li id="about"><a href="./about.html">About</a></li>
                <li id="collect"><a href="#">Collect</a></li>
                <li id="blog"><a href="./blog.html">Blog</a></li>
                <li id="note"><a href="./note.html">Note</a></li>
                <li id="project"><a href="./project.html">Project</a></li>

            </ul>
        </nav>
        <div></div>
    </header>
    <div id="container">
        <article>
            <h3>软件</h3>
            <details>
                <summary>编辑器</summary>
                <p>vim: 号称编辑器之神, 除了需要IDE对某个语言的特殊支持, 再也不用打开IDE了</p>
                <div class="links">
                    <a href="https://vim.sourceforge.io/">vim主页</a>
                    <a href="https://vimawesome.com/">vim插件网站</a>
                    <a href="https://github.com/ruinb0w/use_vim_as_ide">教程</a>
                    <a href="https://github.com/ruinb0w/spf13-vim">vim套件</a>
                </div>
                <p>atom: 继github后又一力作,号称加载速度和IDE一样的编辑器</p>
            </details>
            <details>
                <summary>虚拟机</summary>
                <div class="links">
                    <p>virtualbox: 开源虚拟机, 免费小巧功能强大. 就是不知道oracle什么时候会对它下手emmm</p>
                    <a href="https://www.virtualbox.org/">主页</a>
                    <a href="https://wiki.archlinux.org/index.php/VirtualBox">arch virtualbox wiki</a>
                </div>
            </details>
            <details>
                <summary>笔记</summary>
            </details>
        </article>
        <hr>
        <article>
            <h3>书单</h3>
            <details>
                <summary>2015</summary>
                <div class="links">
                    <a href="https://pan.baidu.com/s/1geJVwor">linux命令行与shell脚本编程大全</a>
                    鸟哥的私房菜:基础篇
                    汇编语言
                    c语言程序设计
                    linux程序设计
                </div>
            </details>
            <details>
                <summary>2016</summary>
                <div class="links">
                <a href="https://pan.baidu.com/s/1i53m9Bv">图解网络硬件</a>
                <a href="https://pan.baidu.com/s/1eSIlLFO">图解TCP/IP</a>
                <a href="https://pan.baidu.com/s/1i53m9Bv">图解密码学</a>
                <a href="https://pan.baidu.com/s/1qXIXfo4">html5权威指南</a>
                <a href="https://pan.baidu.com/s/1gfgqah9">javascript高级程序设计</a>
                </div>
            </details>
            <details>
                <summary>2017</summary>
                web开发权威指南
                你不知道javascript(上)
                你不知道javascript(中)
                你不知道javascript(下)
            </details>
            <details>
              <summary>2018</summary>
              计算机组成原理
              计算机网络
              操作系统
              数据结构
            </details>
        </article>
        <hr>
        <article id="video_set">
            <h3>视频</h3>
            <details>
                <summary>linux</summary>
                <p>老男孩的运维视频, 详细易于理解</p>
                <button value="aid=14760765&cid=24055661" class="select_video">1</button>
                <button value="aid=14760859&cid=24055866" class="select_video">2</button>
                <button value="aid=14760933&cid=24055941" class="select_video">3</button>
                <button value="aid=14760968&cid=24055979" class="select_video">4</button>
                <button value="aid=14760997&cid=24056044" class="select_video">5</button>
            </details>
            <details>
                <summary>html</summary>
            </details>
            <details>
                <summary>计算机基础</summary>
                <p>数据结构</p>
                <button value="aid=11296606&cid=18682185" class="select_video">1</button>
                <button value="aid=11296606&cid=18682180" class="select_video">2</button>
                <button value="aid=11296606&cid=18682186" class="select_video">3</button>
                <button value="aid=11296606&cid=18682187" class="select_video">4</button>
                <button value="aid=11296606&cid=18682181" class="select_video">5</button>
                <button value="aid=11296606&cid=18682188" class="select_video">6</button>
                <button value="aid=11296606&cid=18682182" class="select_video">7</button>
                <button value="aid=11296606&cid=18682183" class="select_video">8</button>
                <button value="aid=11296606&cid=18682184" class="select_video">9</button>
                <button value="aid=11296606&cid=18682189" class="select_video">10</button>
            </details>
        </article>
    </div>
        <iframe id="player" src="" frameborder="0" width="980" height="556" allowfullscreen></iframe>
    <footer>
        <p>(ɔ) the ruinb0w after the ruin.</p>
    </footer>
    <script src="../script/script.js"></script>
</body>

</html>
